<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import selector from "@/components/Form/selector.vue";
const searchValue = ref();
interface IselectorData {
  id: string | number;
  label: string;
  remark?: string;
  disabled?: boolean;
}
const keyDatas = reactive({
  one: [],
  two: [],
  three: [],
  four: [],
});
const selectorData1: Array<IselectorData> = [
  { id: 1, label: "选项一", remark: "", disabled: false },
  { id: 2, label: "选项二", remark: "有一点备注", disabled: false },
  {
    id: 3,
    label: "选项二",
    remark: "描述超级超级超级超级超级超级多的文案",

    disabled: false,
  },
  {
    id: 4,
    label: "选项三",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",

    disabled: false,
  },
];
const selectorData2: Array<IselectorData> = [
  { id: 1, label: "选项四", remark: "", disabled: false },
  { id: 2, label: "选项五", remark: "有一点备注", disabled: true },
  { id: 3, label: "选项六", remark: "有一点备注", disabled: false },
  { id: 4, label: "选项七", remark: "有一点备注", disabled: false },
  { id: 5, label: "选项八", remark: "有一点备注", disabled: true },
  { id: 6, label: "选项九", remark: "有一点备注", disabled: false },
  {
    id: 7,
    label: "选项十",
    remark: "描述超级超级超级超级超级超级多的文案",
    disabled: false,
  },
  {
    id: 8,
    label: "选项十一",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",

    disabled: false,
  },
];
const selectorData3: Array<IselectorData> = [
  { id: 1, label: "选项十二", remark: "", disabled: false },
  { id: 2, label: "选项十三", remark: "", disabled: false },
  { id: 3, label: "选项十四", remark: "", disabled: false },
  { id: 4, label: "选项十五", remark: "", disabled: true },
  { id: 5, label: "选项十六", remark: "", disabled: false },
  { id: 6, label: "选项十七", remark: "", disabled: false },
  { id: 7, label: "选项十八", remark: "", disabled: false },
  { id: 8, label: "选项十九", remark: "", disabled: false },
];
const selectorData4: Array<IselectorData> = [
  { id: 1, label: "选项二十", remark: "", disabled: false },
  {
    id: 2,
    label: "选项二十一",
    remark: "有一点备注",

    disabled: false,
  },
  {
    id: 3,
    label: "选项二十二",
    remark: "有一点备注",

    disabled: false,
  },
  {
    id: 4,
    label: "选项二十三",
    remark: "有一点备注",

    disabled: true,
  },
  {
    id: 5,
    label: "选项二十四",
    remark: "有一点备注",

    disabled: false,
  },
  {
    id: 6,
    label: "选项二十五",
    remark: "有一点备注",
    disabled: false,
  },
  {
    id: 7,
    label: "选项二十六",
    remark: "描述超级超级超级超级超级超级多的文案",
    disabled: false,
  },
  {
    id: 8,
    label: "选项二十七",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",
    disabled: false,
  },
];
const popshow = ref(false);
function searchFocus(e: object) {
  // console.log(e);
  popshow.value = true;
}
function cancelSelector() {
  popshow.value = false;
}
function sureSelector() {
  popshow.value = false;
  console.log(keyDatas);
}
</script>
<template>
  <div class="padding_15">
    <div class="public_form_box">
      <van-search
        v-model="searchValue"
        placeholder="请输入搜索关键词"
        @focus="searchFocus"
      />
      <van-popup position="top" :show="popshow" :style="{ height: '100%' }">
        <div class="pop-box">
          <div class="pop-con">
            <selector
              v-model="keyDatas.one"
              selectorTitle="有标题"
              :selectorData="selectorData1"
              keyName="one"
            ></selector>
            <selector
              v-model="keyDatas.two"
              selectorTitle="有标题"
              multiple
              columns="3"
              :selectorData="selectorData2"
            ></selector>
            <selector
              v-model="keyDatas.three"
              selectorTitle="标题二"
              multiple
              :selectorData="selectorData3"
            ></selector>
            <selector
              v-model="keyDatas.four"
              selectorTitle="标题二"
              multiple
              columns="3"
              :selectorData="selectorData4"
            ></selector>
          </div>
          <div class="pop-btn">
            <button class="white-btn" @click="cancelSelector">取消</button>
            <button class="blue-btn" @click="sureSelector">确定</button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pop-box {
  width: 100%;
  height: 100%;
  .pop-con {
    width: 100%;
    height: calc(100% - 86px);
    overflow-y: auto;
  }
  .pop-btn {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    .white-btn {
      width: calc(50% - 10px);
      border: 1px solid #eeeeee;
      background-color: #fff;
      color: #333333;
      height: 46px;
      border-radius: 4px;
    }
    .blue-btn {
      width: calc(50% - 10px);
      border: 1px solid #1677ff;
      background-color: #1677ff;
      color: #ffffff;
      height: 46px;
      border-radius: 4px;
    }
  }
}
</style>
